<template>
	<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
		<el-tab-pane label="要货对账差异" name="applyAccountDiffe"></el-tab-pane>
		<el-tab-pane  label="赠送对账差异" name="giveAccountDiffe"></el-tab-pane>
		<el-tab-pane  label="退货对账差异" name="afterAccountDiffe"></el-tab-pane>
		<el-tab-pane  label="空瓶对账差异" name="recoveryAccountDiffe"></el-tab-pane>
	</el-tabs>
	<Suspense>
		<template #default>
			<keep-alive>
				<component :is="activeComponent"/>
            </keep-alive>
			
		</template>
		<template #fallback>
			<el-skeleton :rows="3" />
		</template>
	</Suspense>
</template>

<script>
   import { defineAsyncComponent } from "vue";
   import tool from "@/utils/tool";
   export default {
	name:"accountmanageDiffe",
	   components: {
			applyAccountDiffe: defineAsyncComponent(() => import("./applyAccountDiffe.vue")),
			giveAccountDiffe: defineAsyncComponent(() => import("./giveAccountDiffe.vue")),
			afterAccountDiffe: defineAsyncComponent(() => import("./afterAccountDiffe.vue")),
			recoveryAccountDiffe: defineAsyncComponent(() => import("./recoveryAccountDiffe.vue")),
	   },
	   data() {
		   return {
			   orgType:'',
			   activeName:'', // 初始显示的标签页名称应该对应el-tab-pane的name属性
			   activeComponent: "", // 初始显示的组件名称
		   };
	   },
	   methods: {
		   handleClick(tab, event) {
			this.$nextTick(() => {
      			// 处理标签页点击事件
	  			console.log(tab.props.name); // 输出当前标签页的名称

				this.activeComponent=tab.props.name
			});
			   
		   },
	   },
	   async mounted() {
		   this.orgType = tool.data.get("USER_INFO").AccountType;
		   this.activeName="applyAccountDiffe"
		   this.activeComponent=this.activeName
	   }
   }
</script>

<style>
</style>
